<template>
  <n-modal :show="show" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia">
      <mac-header
        :title="title"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <n-scrollbar style="max-height: 80vh">
          <div style="padding-left: 5px">
            <n-form ref="formRef" :model="queryForm" :rules="rules">
              <n-form-item label="头像" path="photo">
                <y-upload v-model="queryForm.photo" />
              </n-form-item>
              <n-form-item label="昵称" path="managerName">
                <n-input
                  v-model:value="queryForm.managerName"
                  placeholder="请输入"
                />
              </n-form-item>
              <n-form-item label="角色" path="mentId">
                <n-select
                  v-model:value="queryForm.mentId"
                  filterable
                  label-field="roleName"
                  value-field="id"
                  :options="optionsState.routeList"
                />
              </n-form-item>
              <n-form-item label="手机号" path="phone">
                <n-input v-model:value="queryForm.phone" placeholder="请输入" />
              </n-form-item>
              <n-form-item label="邮箱" path="email">
                <n-input v-model:value="queryForm.email" placeholder="请输入" />
              </n-form-item>
              <n-form-item label="账号" path="username">
                <n-input
                  v-model:value="queryForm.username"
                  placeholder="请输入"
                />
              </n-form-item>
              <n-form-item label="密码" path="password" v-if="!queryForm.id">
                <n-input
                  v-model:value="queryForm.password"
                  placeholder="请输入"
                />
              </n-form-item>
              <n-form-item>
                <div class="tools w-full">
                  <n-button
                    type="primary"
                    attr-type="button"
                    @click="handleValidateClick"
                  >
                    <span>提交</span>
                  </n-button>
                </div>
              </n-form-item>
            </n-form>
          </div>
        </n-scrollbar>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import { ref, inject } from 'vue'
import { useFullscreen } from '@vueuse/core'
import roleUserApi from '@/service/api/setting/roleUser'
import type { FormInst, FormRules } from 'naive-ui'
import {
  NButton,
  useMessage,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NScrollbar,
  NSelect
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import YUpload from '@/components/yang/YUpload'
const $clone = inject('$clone') as <T>(data: T) => T
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const show = ref(false)
const title = ref('添加')
const toast = useMessage()
const emit = defineEmits(['success'])
const optionsState = inject('optionsState') as any
const queryForm: any = ref({
  photo: 'https://i.gtimg.cn/club/item/face/img/2/16022_100.gif',
  mentId: '',
  managerName: '',
  phone: '',
  email: '',
  username: '',
  password: ''
})
const formRef = ref<FormInst | null>(null)
const rules: FormRules = {
  mentId: [
    {
      required: true,
      type: 'number',
      message: '请选择角色',
      trigger: 'blur'
    }
  ],
  photo: [
    {
      required: true,
      message: '请上传头像',
      trigger: 'blur'
    }
  ],
  managerName: [
    {
      required: true,
      message: '请输入昵称',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入昵称',
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur'
    }
  ],
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
}
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate(errors => {
    if (!errors) {
      save()
    }
  })
}

const save = async () => {
  if (!queryForm.value.parentId) {
    queryForm.value.parentId = 0
  }
  const params = $clone(queryForm.value)
  if (params?.id) {
    const { code, message } = await roleUserApi.edit(params)
    if (code !== 200) {
      toast.error(message)
      return
    }
    toast.success('编辑成功')
  } else {
    const { code, message } = await roleUserApi.add(params)
    if (code !== 200) {
      toast.error(message)
      return
    }
    toast.success('添加成功')
  }
  emit('success')
  close()
}
const close = () => {
  queryForm.value = {
    photo: 'https://i.gtimg.cn/club/item/face/img/2/16022_100.gif',
    mentId: '',
    managerName: '',
    phone: '',
    email: '',
    username: '',
    password: ''
  }
  show.value = false
}

const open = (row?: any) => {
  title.value = '添加'
  if (row) {
    queryForm.value = $clone(row)
    title.value = row?.id ? '编辑' : '添加'
  }
  show.value = true
}

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
